<template>
  <div class="flex items-center header">
    <div class="flex items-center mode">
      <span class="active">生产模式</span>
      <span @click="handleOpenPlan">指令信息</span>
      <div class="icons">
        <div
          v-for="roller in rollerList"
          :key="roller.rollerNo"
          :class="['icon', `icon-${roller.rollerNo}`, roller.lock == 1 ? 'green' : 'blue']"
          @click="handleRollerClick(roller)"
        ></div>
      </div>
    </div>
    <div class="flex items-center sts">
      <div class="flex column time">
        <span class="furore">{{ currentTime }}</span>
        <span>{{ currentDate }}</span>
      </div>
      <img src="/terminal/1_wifi_blue.png" alt="" />
      <router-link to="/wms-login">
        <img src="/terminal/1_back_blue.png" alt="" style="width: 25px; height: 25px; margin-top: 9px" />
      </router-link>
    </div>

    <!-- 确认弹窗 -->
    <q-dialog v-model="isDialogOpen">
      <q-card>
        <q-card-section>
          {{ dialogMessage }}
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="取消" v-close-popup />
          <q-btn flat label="确定" color="primary" @click="confirmChange" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, PropType } from 'vue';
import { emitter } from 'src/emitter';
import axios from 'axios'; // 假设你使用 axios 来发送 POST 请求

export default defineComponent({
  name: 'terminal-crane-header',
  props: {
    rollerList: {
      type: Array as PropType<any[]>,
      required: true,
    },
  },

  setup(props) {
    console.log(props.rollerList); // 检查数据
    const currentTime = ref('');
    const currentDate = ref('');

    const isDialogOpen = ref(false);
    const dialogMessage = ref('');
    const selectedRoller = ref<any>(null);

    const updateDateTime = () => {
      const now = new Date();
      currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false });
      currentDate.value = now.toLocaleDateString('zh-CN');
    };

    const handleRollerClick = (roller: any) => {
      selectedRoller.value = roller;
      dialogMessage.value = `是否确认${roller.lock == 1 ? '解锁' : '锁定'}辊道 ${roller.rollerNo}？`;
      isDialogOpen.value = true;
    };

    const confirmChange = () => {
      if (!selectedRoller.value) return;

      const newStatus = selectedRoller.value.lock == 1 ? '0' : '1'; // 确保 status 是字符串类型
      const requestParams = {
        rollerNo: selectedRoller.value.rollerNo,
        status: newStatus,
      };

      // 发送请求并在成功或失败后关闭弹窗
      axios
        .post('/api/deviceController/modifyRollerLinkage', null, { params: requestParams })
        .then(response => {
          console.log('信息已传递:', response.data);
          isDialogOpen.value = false; // 成功后关闭弹窗
        })
        .catch(error => {
          console.error('信息传递失败:', error.response?.data || error);
          isDialogOpen.value = false; // 无论成功或失败都关闭弹窗
        });
    };

    onMounted(() => {
      updateDateTime(); // 初始更新
      const intervalId = setInterval(updateDateTime, 1000); // 每秒更新一次

      // 组件销毁时清除定时器
      onUnmounted(() => {
        clearInterval(intervalId);
      });
    });

    const handleOpenPlan = () => {
      emitter.emit('inform', { name: 'terminal-production-plan', value: true });
    };

    return {
      currentTime,
      currentDate,
      handleOpenPlan,
      handleRollerClick,
      isDialogOpen,
      dialogMessage,
      confirmChange,
    };
  },
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'Furore';
  src: url('src/assets/fonts/Furore.otf') format('opentype');
}

.header {
  position: relative;
  width: 100%;
  height: 55px;
  background-image: url('src/assets/terminal/1_top_bg.png');
  background-size: cover;

  .mode {
    position: absolute;
    left: 250px;
    bottom: 5px;
    color: rgb(40, 134, 153);
    font-size: 16px;
    height: 100%;
    line-height: 69.4px;

    span {
      margin-right: 20px;
      cursor: pointer;

      &:hover {
        color: rgb(44, 202, 234);
        font-weight: bold;
      }

      &.active {
        color: rgb(44, 202, 234);
        font-weight: bold;
      }
    }

    .icons {
      display: flex;
      align-items: center;

      .icon {
        width: 80px;
        height: 30px;
        background-size: cover;
        background-repeat: no-repeat; /* 确保背景不重复 */
        margin-left: 10px;
      }

      .icon-13.blue {
        background-image: url('src/assets/terminal/13.png');
      }

      .icon-13.green {
        background-image: url('src/assets/terminal/13-green.png');
      }

      .icon-14.blue {
        background-image: url('src/assets/terminal/14.png');
      }

      .icon-14.green {
        background-image: url('src/assets/terminal/14-green.png');
      }
      .icon-15.blue {
        background-image: url('src/assets/terminal/15.png');
      }

      .icon-15.green {
        background-image: url('src/assets/terminal/15-green.png');
      }
      .icon-16.blue {
        background-image: url('src/assets/terminal/16.png');
      }

      .icon-16.green {
        background-image: url('src/assets/terminal/16-green.png');
      }

      .icon-23.blue {
        background-image: url('src/assets/terminal/23.png');
      }

      .icon-23.green {
        background-image: url('src/assets/terminal/23-green.png');
      }

      .icon-24.blue {
        background-image: url('src/assets/terminal/24.png');
      }

      .icon-24.green {
        background-image: url('src/assets/terminal/24-green.png');
      }

      .icon-25.blue {
        background-image: url('src/assets/terminal/25.png');
      }

      .icon-25.green {
        background-image: url('src/assets/terminal/25-green.png');
      }

      .icon-26.blue {
        background-image: url('src/assets/terminal/26.png');
      }

      .icon-26.green {
        background-image: url('src/assets/terminal/26-green.png');
      }
    }
  }

  .sts {
    position: absolute;
    right: 28px;

    .time {
      color: rgb(44, 202, 234);

      span:nth-child(1) {
        height: 35px;
        font-size: 26px;
        font-family: 'Furore', sans-serif; /* 应用Furore字体 */
      }

      span:nth-child(2) {
        height: 14px;
        font-size: 12px;
      }
    }

    img {
      width: 30px;
      height: 30px;
      margin-left: 14px;
      cursor: pointer;
    }
  }
}

.furore {
  font-family: 'Furore', sans-serif; /* 应用Furore字体 */
}
</style>
